<template>
  <div class="withdraw-container">
    <ResponsiveNav />
    <div class="header-placeholder"></div>

    <div class="withdraw-page">
      <!-- 面包屑导航区域 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/assets' }">
              <i class="fas fa-arrow-left"></i> {{ $t('返回资产') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('加密货币提款') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="divider"></div>
      </div>

      <!-- 页面标题和安全提示 -->
      <div class="page-header">
        <h1>{{ $t('加密货币提款') }}</h1>
        <div class="security-alert">
          <i class="fas fa-shield-alt"></i>
          {{ $t('为了您的资金安全，大额提款需要进行安全验证') }}
        </div>
      </div>

      <!-- 提款步骤 -->
<!--      <div class="steps-section">-->
<!--        <el-steps :active="1" finish-status="success">-->
<!--          <el-step>-->
<!--            <template #title>-->
<!--              <div class="step-title">-->
<!--                <span class="main">填写信息</span>-->
<!--                <span class="sub">填写提款信息</span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-step>-->
<!--          <el-step>-->
<!--            <template #title>-->
<!--              <div class="step-title">-->
<!--                <span class="main">安全验证</span>-->
<!--                <span class="sub">验证身份信息</span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-step>-->
<!--          <el-step>-->
<!--            <template #title>-->
<!--              <div class="step-title">-->
<!--                <span class="main">提款确认</span>-->
<!--                <span class="sub">完成提款</span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-step>-->
<!--        </el-steps>-->
<!--      </div>-->

      <!-- 提款信息卡片 -->
      <div class="withdraw-section">
        <!-- 资产信息 -->
        <div class="asset-overview">
          <div class="balance-card">
            <div class="balance-title">{{ $t('可提款金额') }}</div>
            <div class="balance-amount">
              <span class="amount">{{ formatPrice(totalBalance*langStore.languageRate) }}</span>
              <span class="unit">{{ langStore.languageSymbol }}</span>
            </div>
<!--            <div class="balance-limits">-->
<!--              <div class="limit-item">-->
<!--                <i class="fas fa-wallet"></i>-->
<!--                <span>单笔限额：10 - 1000000 USDT</span>-->
<!--              </div>-->
<!--              <div class="limit-item">-->
<!--                <i class="fas fa-clock"></i>-->
<!--                <span>今日剩余：{{ formatPrice(dailyLimit - dailyUsed) }} USDT</span>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>

        <!-- 提款表单 -->
        <div class="withdraw-form-wrapper">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="withdraw-form"
            label-position="top"
          >
            <!-- 提款币种卡片 -->
            <div class="form-section">
              <div class="section-title">
                <i class="fas fa-coins"></i>
                {{ $t('提款币种') }}
              </div>
              <div class="crypto-card"
                   v-for="v in cryptoList"
                   :key="v.symbol"
                   :class="[{ active: form.coin === v.coin }]"
                   @click="selectCrypto(v)">
                  <!--                <img src="https://cryptologos.cc/logos/tether-usdt-logo.svg" class="crypto-icon" alt="USDT">-->
                <div class="crypto-info">
                  <div class="name">{{ v.coin }}</div>
                  <div class="desc">
                    <div class="networks">{{ $t('单笔限制') }}:{{ v.withdrawRate.limitAmount }}</div>
                    <div>{{ $t('费率') }}:{{ v.withdrawRate.rate }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 提款网络选择 -->
<!--            <div class="form-section">-->
<!--              <div class="section-title">选择网络</div>-->
<!--              <div class="network-options">-->
<!--                <div-->
<!--                  v-for="network in networks"-->
<!--                  :key="network.value"-->
<!--                  :class="['network-card', { active: form.network === network.value }]"-->
<!--                  @click="form.network = network.value"-->
<!--                >-->
<!--                  <div class="network-header">-->
<!--                    <span class="name">{{ network.label }}</span>-->
<!--                    <el-tag-->
<!--                      v-if="network.value === 'TRC20'"-->
<!--                      type="success"-->
<!--                      size="small"-->
<!--                    >推荐</el-tag>-->
<!--                  </div>-->
<!--                  <div class="network-info">-->
<!--                    <div class="fee">手续费：{{ network.fee }} USDT</div>-->
<!--                    <div class="time">-->
<!--                      <i class="far fa-clock"></i>-->
<!--                      {{ network.time }}-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

            <!-- 提款地址 -->
            <div class="form-section">
              <div class="section-title">{{ $t('提款地址') }}</div>
              <div class="address-wrapper">
                <div class="address-wrapper-none" v-if="!addressesLst.length">
                  {{ $t('暂无地址') }}，
                  <el-button type="primary" @click="addAddress">{{ $t('去绑定') }}</el-button>
                </div>
                <el-select
                  v-else
                  v-model="form.address"
                  @change="changeCilck"
                >
                  <el-option
                    v-for="item in addressesLst"
                    :key="item.walletAddress"
                    :label="item.walletAddress"
                    :value="item.walletAddress"
                  />
                </el-select>
                <!-- <el-input
                  v-model="form.address"
                  :placeholder="$t('请输入提款地址')"
                  size="large"

                >
                </el-input> -->
<!--                <el-select-->
<!--                  v-model="form.address"-->
<!--                  placeholder="请选择提款地址"-->
<!--                  class="address-select"-->
<!--                  filterable-->
<!--                >-->
<!--                  <el-option-->
<!--                    v-for="addr in filteredAddresses"-->
<!--                    :key="addr.address"-->
<!--                    :label="getAddressLabel(addr)"-->
<!--                    :value="addr.address"-->
<!--                  >-->
<!--                    <div class="address-option">-->
<!--                      <div class="address-main">-->
<!--                        <span class="address">{{ formatAddress(addr.address) }}</span>-->
<!--                        <el-tag size="small" type="success" v-if="addr.isDefault">默认</el-tag>-->
<!--                      </div>-->
<!--                      <div class="address-remark" v-if="addr.remark">{{ addr.remark }}</div>-->
<!--                    </div>-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--                <el-button-->
<!--                  class="amazon-button secondary"-->
<!--                  @click="goToWalletAddress"-->
<!--                >-->
<!--                  <i class="fas fa-plus"></i> 添加地址-->
<!--                </el-button>-->
              </div>
            </div>

            <!-- 提款金额 -->
            <div class="form-section">
              <div class="section-title">{{ $t('提款金额') }}</div>
              <div class="amount-wrapper">
                <el-input
                  v-model.number="form.applyMoney"
                  :placeholder="$t('请输入提款金额')"
                  type="number"
                  class="amount-input"
                >
<!--                  <template #prepend>USDT</template>-->
                  <template #append>
                    <el-button @click="setMaxAmount">{{ $t('全部提款') }}</el-button>
                  </template>
                </el-input>
<!--                <div class="amount-summary">-->
<!--                  <div class="summary-item">-->
<!--                    <span class="label">手续费</span>-->
<!--                    <span class="value">{{ formatPrice(fee) }} USDT</span>-->
<!--                  </div>-->
<!--                  <div class="summary-item highlight">-->
<!--                    <span class="label">实际到账</span>-->
<!--                    <span class="value">≈ {{ formatPrice(form.amount ? form.amount - fee : 0) }} USDT</span>-->
<!--                  </div>-->
<!--                </div>-->
              </div>
            </div>

            <!-- 资金密码 -->
<!--            <el-form-item label="资金密码" prop="walletPassword">-->
            <div class="form-section">
              <div class="section-title">{{ $t('资金密码') }}</div>
              <el-input
                  v-model="form.withdrawPwd"
                  type="password"
                  :placeholder="$t('请输入资金密码')"
                  show-password
                />
            </div>
<!--            </el-form-item>-->

            <!-- 提交按钮 -->
            <div class="form-section submit-section">
              <el-button
                type="primary"
                class="amazon-button primary submit-btn"
                :loading="loading"
                @click="handleWithdraw"
              >
<!--                下一步，进行安全验证-->
                {{ $t('确认提款') }}
              </el-button>
            </div>
          </el-form>
        </div>
      </div>

      <!-- 提款说明 -->
      <div class="notice-section">
        <div class="notice-list">
          <div class="notice-item">
            <div class="icon-wrapper warning">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="content">
              <h4>{{ $t('安全提醒') }}</h4>
              <p>{{ $t('请务必确认选择正确的提款网络，错误的网络可能导致资产丢失且无法找回') }}</p>
            </div>
          </div>
          <div class="notice-item">
            <div class="icon-wrapper info">
              <i class="fas fa-wallet"></i>
            </div>
            <div class="content">
              <h4>{{ $t('额度限制') }}</h4>
              <p>{{ $t('单笔提款限额为 10 - 1000000 USDT，每日累计最高 5000000 USDT') }}</p>
            </div>
          </div>
          <div class="notice-item">
            <div class="icon-wrapper success">
              <i class="fas fa-clock"></i>
            </div>
            <div class="content">
              <h4>{{ $t('到账说明') }}</h4>
              <p>{{ $t('一般 10-30 分钟内到账，高峰期可能会有延迟，请耐心等待') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import { ref, computed, reactive,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// import { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router'
// import { WithdrawLimit, WalletAddress, NetworkInfo } from './types'
import {ApiConfig} from "@/api/common/index.js";
import useUserStore from '@/store/modules/user'
import {ApiWithdrawSubmit} from "@/api/assets.js";
import {useI18n} from "vue-i18n";
const { t } = useI18n();
import { walletAddressDefault,walletAddresslLst} from '@/api/assets'

import useLangStore from '@/store/modules/lang'
const langStore = useLangStore()

const userStore = useUserStore()




// 资产数据
const totalBalance = ref(0)
// 加密货币列表
const cryptoList = ref([])
//获取提款地址
const addressesLst = ref([]);

const changeCilck = async (e) => {
  console.log(e,'eev');
  let formValue =  addressesLst.value.find((item) => item.walletAddress == e);

  form.value = {
    // crypto: 'USDT',
    withdrawWay: 2,
    address: formValue.walletAddress,
    applyMoney: 0,
    coin: '',
    withdrawPwd: ''

  }

}
//获取个人信息
const getInfouser = async () => {
  const getInfouserStore = await userStore.getInfo();
  totalBalance.value = getInfouserStore.data?.wallet?.memberWallet || 0;
  // availableBalance.value = getInfouserStore.data?.wallet?.memberWallet || 0;
  //获取提款地址
    let obj = {
      pageSize:"10",
      pageNum:'1'
    }
    walletAddresslLst(obj).then(res => {
      addressesLst.value = res.rows;
    })
    //获取默认提款地址;
    walletAddressDefault(obj).then(res => {
      // addressesLst.value = res.rows;
      form.value = {
        // crypto: 'USDT',
        withdrawWay: 2,
        address: res.data.walletAddress,
        applyMoney: 0,
        coin: res.data.coinName,
        withdrawPwd: ''

      }
    })

}

// 加密货币列表
const CryptoCoin = ref([])

// 状态变量
const formRef = ref()
const loading = ref(false)
const availableBalance = ref(1000) // USDT
const dailyLimit = ref(5000) // USDT
const dailyUsed = ref(2000) // USDT

// 表单数据
const form = ref({
  // crypto: 'USDT',
  withdrawWay: 2,
  address: '',
  applyMoney: 0,
  coin: '',
  withdrawPwd: ''

})

const selectCrypto = (item) => {
  form.value.coin = item.coin
  // form.value.address = item.address
}


const handleWithdraw = () => {
  if (!form.value.coin) {
    ElMessage.error(t('请选择提款币种'))
    return
  }
  if (!form.value.address) {
    ElMessage.error(t('请输入提款地址'))
    return
  }
  if (Number(form.value.applyMoney) <= 0) {
    ElMessage.error(t('提款数量必须大于0'))
    return
  }
  if (!/^[0-9]+(\.[0-9]{1,2})?$/.test(form.value.applyMoney)) {
    ElMessage.error(t('充值数量必须为数字或小数'))
    return
  }
  if (!form.value.withdrawPwd) {
    ElMessage.error(t('请输入资金密码'))
    return
  }
  if (form.value.withdrawPwd.length > 6) {
    ElMessage.error(t('资金密码不能大于6位数'))
    return
  }

  loading.value = true
  ApiWithdrawSubmit(form.value).then(() => {
    ElMessage.success(t('提现申请提交成功'))
    form.value = {
      withdrawWay: 2,
      address: '',
      applyMoney: 0,
      coin: '',
      withdrawPwd: ''
    }
    // getInfouser();
    router.push('/assets')
  }).finally(() => {
    loading.value = false
  })
}

const addAddress = () => {
  router.push({
    path: '/assets/wallet-address',
    query: { from: 'assets' }
  })
}

// 表单验证规则
const rules = {
  network: [
    { required: true, message: '请选择提款网络' }
  ],
  address: [
    { required: true, message: '请输入提款地址' },
    { min: 30, message: '请输入正确的提款地址' }
  ],
  applyMoney: [
    { required: true, message: '请输入提款金额' },
    { type: 'number', min: 10, message: '最小提款金额为 10 USDT' },
    { type: 'number', max: 5000, message: '最大提款金额为 5,000 USDT' }
  ],
  withdrawPwd: [
    { required: true, message: '请输入资金密码', trigger: 'blur' },
    { min: 6, max: 6, message: '资金密码为6位数字', trigger: 'blur' }
  ]
}

// 计算属性
const selectedCryptoInfo = computed(() => {
  return cryptoList.find(c => c.symbol === form.network)
})

const fee = computed(() => {
  if (!form.amount) return 0
  // 手续费改为固定金额，根据不同网络
  const networkFees = {
    'TRC20': 1,
    'ERC20': 15,
    'BEP20': 2
  }
  return networkFees[form.network] || 0
})

const formatCryptoAmount = computed(() => {
  if (!form.amount) return '0.00'
  // 这里应该根据实时汇率计算，这里只是示例
  const rates = {
    'BTC': 0.000033,
    'ETH': 0.00055,
    'USDT': 1,
    'USDC': 1,
    'DAI': 1
  }
  const rate = rates[form.network] || 1
  return ((form.amount - fee.value) * rate).toFixed(8)
})

// 添加路由实例
const router = useRouter()

// 添加钱包地址列表
const addresses = ref([
  {
    id: 1,
    crypto: 'USDT',
    network: 'TRC20',
    address: 'TNPeeaaFB7K9cmo4uQpcU32zGK8G1NYqeL',
    remark: '火币提现地址',
    isDefault: true
  }
])

// 过滤地址列表
const filteredAddresses = computed(() => {
  return addresses.value.filter(addr => addr.network === form.network)
})

// 格式化地址显示
const formatAddress = (address) => {
  return address.slice(0, 8) + '...' + address.slice(-8)
}

// 获取地址标签
const getAddressLabel = (addr) => {
  return `${formatAddress(addr.address)}${addr.remark ? ` (${addr.remark})` : ''}`
}

// 跳转到钱包地址管理
const goToWalletAddress = () => {
  router.push('/assets/wallet-address')
}

// 获取网络标签类型
// const getNetworkTagType = (network): 'success' | 'warning' | '' => {
//   const types: Record<string, 'success' | 'warning' | ''> = {
//     'TRC20': 'success',
//     'BEP20': 'warning'
//   }
//   return types[network] || ''
// }

// 方法
const setMaxAmount = () => {
  form.value.applyMoney = totalBalance.value * langStore.languageRate
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    // TODO: 调用提款API
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('提款申请已提交')
    // getInfouser();
    router.push('/assets')
  } catch (error) {
    console.error('提款失败:', error)
  } finally {
    loading.value = false
  }
}

// 工具方法
const formatPrice = (price) => {
  // 转为数字后再调用 toFixed
  if (!isNaN(price)) {
    price = Number(price);
    return price.toFixed(2)
  } else {
    return 0
  }
}
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

const formatTxid = (txid) => {
  return txid.slice(0, 6) + '...' + txid.slice(-6)
}

const getCryptoIcon = (symbol) => {
  return cryptoList.find(c => c.symbol === symbol)?.icon
}

const getExplorerUrl = (network, txid) => {
  // TODO: 根据网络返回对应的区块浏览器URL
  return `https://etherscan.io/tx/${txid}`
}

// type StatusType = 'success' | 'warning' | 'info' | 'primary' | 'danger'
//
// const getStatusType = (status: string): StatusType => {
//   const types: Record<string, StatusType> = {
//     '已完成': 'success',
//     '处理中': 'warning',
//     '失败': 'danger'
//   }
//   return types[status] || 'info'
// }

// 定义网络列表
// const networks = []

const isMobile = ref(window.innerWidth <= 768)

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768
})

onMounted(() => {
  getInfouser();
  ApiConfig({
    key: 'RATE_SETTING'
  }).then(res => {
    cryptoList.value = res.data.filter(item => item.type === 2)
  })
})
</script>

<style lang="scss" scoped>
.withdraw-container {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.withdraw-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.page-nav {
  margin-bottom: 20px;

  .breadcrumb {
    margin-bottom: 16px;

    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #666;
        font-weight: normal;

        &:hover {
          color: #1890ff;
        }

        i {
          margin-right: 4px;
        }
      }
    }
  }

  .divider {
    height: 1px;
    background: #e8e8e8;
    margin: 0;
  }
}

.page-header {
  margin-bottom: 24px;

  h1 {
    font-size: 24px;
    color: #111;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .security-alert {
    color: #0066c0;
    font-size: 14px;

    i {
      margin-right: 8px;
    }
  }
}

.steps-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;

  .step-title {
    .main {
      display: block;
      font-size: 14px;
      color: #111;
    }

    .sub {
      display: block;
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;

  h2 {
    font-size: 21px;
    color: #111;
    font-weight: 400;
    margin: 0;
  }

  .balance-display {
    color: #666;
    font-size: 14px;

    .amount {
      color: #111;
      font-size: 18px;
      font-weight: 500;
      margin-left: 8px;
    }
  }
}

.withdraw-section,
.notice-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.asset-overview {
  margin-bottom: 32px;

  .balance-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s;

    &:hover {
      transform: translateY(-2px);
    }

    .balance-title {
      color: #495057;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .balance-amount {
      margin-bottom: 16px;

      .amount {
        font-size: 32px;
        font-weight: 500;
        color: #212529;
        text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
      }

      .unit {
        font-size: 20px;
        color: #212529;
      }
    }

    .balance-limits {
      display: flex;
      justify-content: center;
      gap: 24px;
      color: #6c757d;
      font-size: 12px;

      .limit-item {
        display: flex;
        align-items: center;
        gap: 6px;

        i {
          color: #adb5bd;
        }
      }
    }
  }
}

.form-section {
  margin-bottom: 32px;

  .section-title {
    font-size: 16px;
    color: #212529;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;

    i {
      color: #adb5bd;
    }
  }
}

.crypto-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.2s;
  margin-bottom: 10px;

  &:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  &.active {
    color: #409eff;
    border-color: #409eff;
    background: #ecf5ff;
  }

  .crypto-icon {
    width: 40px;
    height: 40px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
  }

  .crypto-info {
    width: 100%;
    .name {
      font-size: 16px;
      font-weight: 500;
      color: #212529;
    }

    .desc {
      font-size: 14px;
      color: #6c757d;
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.network-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  @media #{$media-mobile} {
    grid-template-columns: 1fr;  // 移动端单列显示
    gap: 12px;  // 减小间距
  }

  .network-card {
    padding: 16px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      border-color: #a88734;
      background: #fafafa;
    }

    &.active {
      border-color: #a88734;
      background: #fff9e6;
    }

    .network-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .name {
        font-size: 16px;
        font-weight: 500;
        color: #212529;
      }
    }

    .network-info {
      .fee {
        font-size: 14px;
        color: #495057;
        margin-bottom: 8px;
      }

      .time {
        font-size: 12px;
        color: #6c757d;

        i {
          margin-right: 4px;
        }
      }
    }
  }
}

.amount-wrapper {
  .amount-input {
    //margin-bottom: 16px;
  }

  .amount-summary {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;

    .summary-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      &.highlight {
        color: #0066c0;
        font-weight: 500;
      }

      .label {
        color: #6c757d;
      }
    }
  }
}

.submit-section {
  text-align: center;

  .submit-btn {
    width: 100%;
    max-width: 400px;
    height: 40px;
    font-size: 16px;
  }
}

.crypto-cell {
  display: flex;
  align-items: center;
  gap: 8px;

  .mini-icon {
    width: 20px;
    height: 20px;
  }
}

.address-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  .address-wrapper-none{
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .address-select {
    flex: 1;
  }

  .add-address-btn {
    margin-top: 1px;
  }
}

.address-option {
  .address-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;

    .address {
      font-family: monospace;
      color: #333;
    }
  }

  .address-remark {
    font-size: 12px;
    color: #666;
  }
}

.notice-section {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 24px;

  @media #{$media-mobile} {
    padding: 20px;
  }

  .notice-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;

    @media #{$media-mobile} {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  .notice-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 32px;
    position: relative;

    @media #{$media-mobile} {
      padding: 0;
    }

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 70%;
      background: #eee;

      @media #{$media-mobile} {
        display: none;  // 移动端隐藏分隔线
      }
    }

    .icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.2s;

      i {
        font-size: 20px;
      }

      &.warning {
        background: #fef3e6;
        color: #e47911;
      }

      &.info {
        background: #f1faff;
        color: #0066c0;
      }

      &.success {
        background: #edf9e6;
        color: #2e8b57;
      }
    }

    .content {
      flex: 1;

      h4 {
        font-size: 15px;
        color: #111;
        margin: 0 0 8px;
        font-weight: 500;
      }

      p {
        font-size: 13px;
        color: #333;
        margin: 0;
        line-height: 1.5;
      }
    }

    &:hover {
      .icon-wrapper {
        transform: scale(1.05);
      }
    }
  }
}

.mobile-history {
  .history-item {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .history-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;

      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }

      .label {
        color: #666;
        font-size: 14px;
      }

      .value {
        color: #333;
        font-size: 14px;
        text-align: right;

        &.address {
          font-family: monospace;
        }
      }
    }
  }
}
</style>
